<template>
  <div class="operation-record-view">

    <!--    <el-steps direction="vertical">-->
    <!--      <el-step v-for="(item,index) in datas">-->
    <!--        <template #description>-->
    <!--          <div class="operation-item">-->

    <!--            <div class="item-top">-->
    <!--              <p>{{item.content}}</p>-->

    <!--              <div v-if="item.no" class="audit-no">-->
    <!--                关联审批：-->
    <!--                <span>{{item.no}}</span>-->
    <!--              </div>-->
    <!--            </div>-->

    <!--            <div class="item-center" v-if="item.changes">-->

    <!--              <template v-for="(change,index1) in item.changes">-->

    <!--                <div v-if="index1 < 2 || item.isOpen" :key="index1">-->

    <!--                  <span>{{change.changeLabel}}：</span>-->

    <!--                  <span>{{change.oldValue}} -> </span>-->

    <!--                  <span>{{change.changeValue}}</span>-->

    <!--                  <a v-if="item.changes.length > 2 && index1 == 1 && !item.isOpen" class="changeBtn" @click="item.isOpen = true">展开</a>-->

    <!--                  <a v-if="item.changes.length - 1 == index1 && item.isOpen" class="changeBtn" @click="item.isOpen = false">收起</a>-->

    <!--                </div>-->

    <!--              </template>-->

    <!--            </div>-->

    <!--            <div class="item-bottom">-->

    <!--              <p class="date">{{item.date}}</p>-->

    <!--              <p>{{item.people}}</p>-->

    <!--              <p>({{item.dep}})</p>-->

    <!--            </div>-->

    <!--          </div>-->
    <!--        </template>-->

    <!--      </el-step>-->

    <!--    </el-steps>-->

    <el-timeline style="margin-left: 10px">
      <el-timeline-item
        v-for="(item,index) in datas"
        :key="index"
        :icon="item.icon"
        :type="item.type"
        size="large"
      >
        <div class="operation-item">

          <div class="item-top">
            <p>{{ item.title }}</p>

            <div v-if="item.customerId > 0" class="audit-no">
              <el-link
                      style="display: flex;align-items: center"
                      :underline="false"
                      type="primary"
                      @click="customerClick(item)"
              >{{ item.customerName }}</el-link>
            </div>
            <div
              v-else-if="item.processInstanceId"
              class="audit-no"
            >
              关联审批：
              <el-link
                style="display: flex;align-items: center"
                :underline="false"
                type="primary"
                @click="auditClick(item.processInstanceId)"
              >{{ item.processNo }}</el-link>
            </div>
          </div>

          <div
            v-if="item.metaData"
            class="item-center"
          >

            <template v-for="(change,index1) in item.metaData">

              <div
                v-if="index1 < 2 || item.isOpen"
                :key="index1"
              >

                <span
                  v-for="(value, key, index3) in change"
                  :key="index3"
                >
                  <template v-if="key != '适用地区'">
                    <span>{{ key }}：</span><span>{{ value }}</span>
                  </template>
                  <template v-else>
                    <div style="display: flex; align-items: center">
                      <span>{{ key }}：</span>
                      <area-list-view v-if="value.before" :areas="value.before" />
                      <span style="margin: 0 10px"> -> </span>
                      <area-list-view v-if="value.after" :areas="value.after" />
                    </div>
                  </template>

                </span>

                <a
                  v-if="item.metaData.length > 2 && index1 == 1 && !item.isOpen"
                  class="changeBtn"
                  @click="item.isOpen = true"
                >展开</a>

                <a
                  v-if="item.metaData.length - 1 == index1 && item.isOpen"
                  class="changeBtn"
                  @click="item.isOpen = false"
                >收起</a>

              </div>

            </template>

          </div>

          <div class="item-bottom">

            <p class="date">{{ dateFormat('yyyy-mm-dd HH:MM',item.createdAt) }}</p>

            <p>{{ item.creatorName }}</p>

            <p>({{ item.departmentName }})</p>

          </div>

        </div>
      </el-timeline-item>
    </el-timeline>

  </div>
</template>

<script>
import {useRoute, useRouter} from 'vue-router'
import {defineComponent, inject, onMounted, reactive, toRefs, watch} from 'vue'

export default defineComponent({
  name: 'Operation',
  props: {
    list: {
      type: Array,
      default: [],
    },
    mode: {
      type: String,
      default: 'plan',
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    const api = inject('api')
    var data = reactive({
      datas: [],
    })

    watch(
      () => props.id,
      (newV, oldV) => {
        getData()
      }
    )

    const getData = () => {
      data.datas = []
      const a = {
        logType: props.mode,
        id: props.id ? props.id : route.query.id,
      }
      api.common.GET_COMMON_HISTORY(a).then((res) => {
        if (!res.code && res.data) {
          for (let i = 0; i < res.data.history.length; i++) {
            const a = { ...res.data.history[i] }
            if (i == res.data.history.length - 1) {
              a.type = 'primary'
            }
            data.datas.unshift(a)

            const b = {
              label: '单位',
              value: '瓶 -> 袋',
            }
          }
        }
      })
    }

    const auditClick = (id) => {
      api.common.GET_CURRENT_TASK(id).then((res) => {
        if (!res.code && res.data) {
          router.push({
            name: 'myStartedDetail',
            query: {
              id: res.data.processInstanceId,
              serviceKey: res.data.serviceKey,
              type: res.data.processDefinitionKey,
              taskId: res.data.currentTask?.taskId,
            },
          })
        }
      })
    }

    const customerClick = (item) => {
      if (item.customerType == 1){
        api.channelAgent.POTENTIALAGENT_DETAIL(item.customerId).then(res=>{
          if (!res.code){
            if (res.data.data.agentType == 'agent'){
              router.push({
                path: "/marketing/cooperationInformation/enterprise/signedDetail",
                query: {id: item.customerId},
              });
            }else{
              router.push({
                path: "/marketing/cooperationInformation/enterprise/potentialDetail",
                query: {id: item.customerId},
              });
            }
          }
        })

      }else if (item.customerType == 2){
        router.push({name:'shangPinPotentialDetails',query:{id:item.customerId}})
      }else if (item.customerType == 3){
        router.push({name:'potentialDetail',query:{id:item.customerId}})
      }
    }

    onMounted(() => {
      getData()
    })

    return {
      ...toRefs(data),

      auditClick,
      customerClick,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.operation-record-view {
  .operation-item {
    .item-top {
      display: flex;
      line-height: 21px;

      .audit-no {
        display: flex;
        padding-left: $page-x;

        a {
          color: $assist-color;
        }
      }
    }

    .item-center {
      padding-bottom: $block-y;

      .changeBtn {
        color: $assist-color;
        padding-left: $page-x;
      }
    }

    .item-bottom {
      display: flex;
      .date {
        padding-right: $page-x;
      }
    }
  }
}
</style>
